<template>
  <view class="container product-list">
    <view class="rf-header-box">
      <view
        class="rf-header"
        :style="{ width: width + 'px', height: height + 'px' }"
      >
        <view
          class="rf-back"
          :style="{ marginTop: arrowTop + 'px' }"
          @tap="back"
        >
          <text class="iconfont iconzuo"></text>
        </view>
        <view class="input-box" :style="{ marginTop: inputTop + 'px' }">
          <input
            v-model="keyword"
            @confirm="search"
            placeholder="请输入关键字"
            placeholder-style="font-size: 24upx; color:#ccc;"
            type="text"
          />
          <text class="icon iconfont iconsousuo2" @tap.stop="search"></text>
        </view>
      </view>
    </view>
    <view class="rf-header-screen" :style="{ top: height + 'px' }">
      <view class="end-title">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          @tap="change(index, item)"
          :class="['title-item', { dis: btnnum == index }]"
        >
          <view class="text"> {{ item.name }} </view>
          <view class="end-cont" :class="{ dis: btnnum == index }"> </view>
        </view>
      </view>
      <view class="price-wrapper">
        <view class="price-text"> 价格 </view>
        <view class="iocn-wrapper">
          <view class="top-kailong" v-if="topArow" @tap="changeSort()"> </view>
          <view class="top-kailong-active" v-if="!topArow" @tap="changeSort()">
          </view>
          <view class="bottom-kailong" v-if="!topArow" @tap="changeSort()">
          </view>
          <view
            class="bottom-kailong-avtive"
            v-if="topArow"
            @tap="changeSort()"
          >
          </view>
        </view>
      </view>
    </view>
    <view class="product-list-wrapper">
      <rf-product-list
        v-if="productParams.type != 'business'"
        :bottom="0"
        :list="productList"
        :isList="isList"
        :style="{ paddingTop: dropScreenH + 10 + 'upx' }"
      ></rf-product-list>
      <view v-if="productParams.type == 'business'">
        <view
          class="sub-list"
          :style="{ paddingTop: dropScreenH + 10 + 'upx' }"
        >
          <view
            class="row-item"
            v-for="(item, index) in productList"
            :key="index"
          >
            <view style="display: flex; justify-content: space-between">
              <view class="flex-start top-wrapper">
                <image :src="item && item.logo" mode="aspectFill"></image>
                <view class="item">
                  <view class="item-title">{{ item.shop_name }}</view>
                  <view class="item-text">
                    {{ item.favorite_count }}人关注
                  </view>
                </view>
              </view>
              <view
                class="go-shop"
                @tap="navTo('/pages/user/coupon/detail', item.id)"
              >
                进店
              </view>
            </view>
            <view class="image-wrappers flex-start">
              <view
                class="image-item"
                v-for="(imageItem, index) in item.products"
                :key="index"
              >
                <image
                  :src="imageItem.images[0].path"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <rf-empty
      :info="errorInfo || '该分类暂无商品'"
      v-if="productList.length === 0 && !loading"
    ></rf-empty>
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
import rfProductList from "@/components/rf-product-list";
import { search } from "@/api/product";
export default {
  components: {
    rfLoadMore,
    rfProductList,
  },
  data() {
    return {
      productList: [],
      tabList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "品牌",
          value: "brand",
        },
        {
          name: "店铺",
          value: "business",
        },
      ],
      btnnum: 0,
      loadingType: "more",
      topArow: true,
      dropScreenH: 0, //下拉筛选框距顶部距离
      width: 200, //header宽度
      height: 64, //header高度
      inputTop: 0, //搜索框距离顶部距离
      arrowTop: 0, //箭头距离顶部距离
      loading: true,
      errorInfo: "",
      isList: false, //是否以列表展示  | 列表或大图
      keyword: "",
      productId: 0,
      page:1,
      productParams: {
        query: "",
        type: "brand",
        sort: "desc",
      },
    };
  },
  onLoad(options) {
    let obj = {};
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-BAIDU
    obj = swan.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-ALIPAY
    my.hideAddToDesktopMenu();
    // #endif
    uni.getSystemInfo({
      success: (res) => {
        this.width = obj.left || res.windowWidth;
        this.height = obj.top
          ? obj.top + obj.height + 8
          : res.statusBarHeight + 44;
        this.inputTop = obj.top
          ? obj.top + (obj.height - 30) / 2
          : res.statusBarHeight + 7;
        this.arrowTop = obj.top
          ? obj.top + (obj.height - 32) / 2
          : res.statusBarHeight + 6;
        this.searchKey = options.searchKey || "";
        //略小，避免误差带来的影响
        this.dropScreenH = (this.height * 750) / res.windowWidth + 186;
        this.drawerH = res.windowHeight - uni.upx2px(100) - this.height;
      },
    });
    this.initData(options);
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.getNewProductList("refresh", this.productParams);
  },
  // 加载更多
  onReachBottom() {
    if (this.loadingType === "nomore") return;
    this.page++;
    this.getProductList("nomore", this.productParams);
  },
  methods: {
    change(e, item) {
      this.btnnum = e;
      console.log(item.value);
      this.productList = [];
      this.productParams.type = item.value;
      this.getProductList("more", this.productParams);
    },
    changeSort() {
      this.topArow = !this.topArow;
      this.productParams.sort = this.topArow == true ? "desc" : "asc";
      this.getProductList("more", this.productParams);
    },
    back() {
      this.$mRouter.back();
    },
    // 初始化数据
    initData(options) {
      let params = {};
      if (options.keyword) {
        this.keyword = options.keyword;
        params.keyword = options.keyword;
      }
      this.productParams.query = params.keyword;
      this.getProductList("more", this.productParams);
    },
    search() {
      this.page = 1;
      this.productList = [];
      this.loading = true;
      this.productParams.query = this.keyword;
      this.getProductList("more", this.productParams);
    },
    // 获取产品列表
    async getProductList(type, params) {
      await this.$http
        .get(search, {
          query: params.query,
          type: params.type,
          sort: params.sort,
          page: this.page,
        })
        .then(async (res) => {
          let list = res.data.data;
          this.loadingType = list.length < 15 ? "more" : "nomore";
          this.productList = [...this.productList, ...list];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getNewProductList(type, params) {
      await this.$http
        .get(search, {
          query: params.query,
          type: params.type,
          sort: params.sort,
          page: this.page,
        })
        .then(async (res) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          let list = res.data.data;
          this.productList = list;
          this.loading = false;
        })
        .catch(() => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.loading = false;
        });
    },
    // 跳转详情
    navTo(route, id) {
      console.log(id);
      this.$mRouter.push({ route, query: { id: id } });
    },
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}
.product-list {
  padding-bottom: env(safe-area-inset-bottom);
  /* 隐藏scroll-view滚动条*/
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
  .rf-header-box {
    width: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    .rf-header {
      display: flex;
      align-items: flex-start;
      border-bottom: 1upx solid #eee;
      margin-bottom: 10upx;
      .rf-back {
        margin-left: 8upx;
        width: 32px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconzuo {
          font-size: $font-lg + 4upx;
          font-weight: 500;
          color: $font-color-dark;
        }
      }
    }
    .input-box {
      width: 100%;
      font-size: $font-sm;
      box-sizing: border-box;
      color: #999;
      display: flex;
      align-items: center;
      overflow: hidden;
      height: 60upx;
      background-color: $page-color-base;
      border-radius: 30upx;
      position: relative;
      margin: 0 20upx 0 10upx;
      padding-left: 60upx;
      .iconsousuo2 {
        z-index: 100;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 20upx;
        width: 60upx;
        height: 60upx;
        font-size: $font-lg + 4upx;
        color: $font-color-dark;
      }
      input {
        width: 100%;
        padding-left: 28upx;
        height: 28upx;
        color: $font-color-base;
        font-size: 28upx;
      }
    }
  }
  .rf-header-screen {
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 99;
    /* 将三个内容view的display设置为none(隐藏) */
    .end-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 72upx;
      .title-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #326130;
      }
    }
    .end-title .text {
      flex-grow: 1;
      height: 42upx;
      line-height: 42upx;
      margin-top: 20upx;
      text-align: center;
    }
    .end-cont {
      display: none;
      margin-bottom: 5upx;
      width: 28upx;
      height: 6upx;
      background: #326130;
      border-radius: 3upx;
    }
    .dis {
      transition: all 0.5s;
      display: block;
    }
    .price-wrapper {
      height: 78upx;
      width: 100%;
      line-height: 78upx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: #f9f9f9;
      margin-top: 20upx;
      .price-text {
        width: 33.33%;
        text-align: center;
      }
      .iocn-wrapper {
        margin-left: -90upx;
        .top-kailong {
          width: 0;
          height: 0;
          border-right: 8upx solid transparent;
          border-left: 8upx solid transparent;
          border-bottom: 8upx solid #999999;
          margin-bottom: 6upx;
        }
        .top-kailong-active {
          width: 0;
          height: 0;
          border-right: 8upx solid transparent;
          border-left: 8upx solid transparent;
          border-bottom: 8upx solid #333333;
          margin-bottom: 6upx;
        }
        .bottom-kailong {
          width: 0;
          height: 0;
          border-right: 8upx solid transparent;
          border-left: 8upx solid transparent;
          border-top: 8upx solid #999999;
        }
        .bottom-kailong-avtive {
          width: 0;
          height: 0;
          border-right: 8upx solid transparent;
          border-left: 8upx solid transparent;
          border-top: 8upx solid #333333;
        }
      }
    }
  }
  .product-list-wrapper {
    .sub-list {
      .row-item {
        height: 307upx;
        border-top: 1upx solid #eeeeee;
        padding: 30upx;
        .top-wrapper {
          image {
            height: 80upx;
            width: 80upx;
            border-radius: 10upx;
            margin-right: 20upx;
          }
          .item {
            .item-title {
              height: 42upx;
              font-size: 30upx;
              font-weight: bold;
              line-height: 42upx;
              color: #333333;
            }
            .item-text {
              height: 33upx;
              font-size: 24upx;
              font-weight: 500;
              line-height: 33upx;
              color: #999999;
            }
          }
        }
        .image-wrappers {
          margin-top: 30upx;
          padding-left: 94upx;
          .image-item {
            image {
              width: 137upx;
              height: 137upx;
              border-radius: 10upx;
              margin-left: 14upx;
            }
          }
        }
      }
    }
  }
}
.go-shop {
  width: 120upx;
  line-height: 60upx;
  height: 60upx;
  border-radius: 30upx;
  text-align: center;
  color: #326130;
  border: 1px solid #326130;
}
</style>
